<template>
  <div class="app-container org-tab-info">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="学校实验室" name="first"></el-tab-pane>
      <el-tab-pane label="实验平台" name="second">
        <platform ref="platform" v-if="activeName=='second'"></platform>
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="20" v-if="activeName=='first'">
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container el_tree_ground">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="width: 100%;height:800px;overflow:hidden;">
          <el-tree v-if="deptOptions.length>0"
            :data="deptOptions"
             style="width: 106%; height:100%;overflow:auto;overflow-x:hidden;"
             node-key="id"
            :default-expanded-keys="[1]"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
        >
        <!--过长处理，鼠标悬浮文字弹框显示全部内容-->
        <span slot-scope="{ node }">
                  <el-tooltip class="item" effect="light" :content="node.label" placement="top-start" v-if="node.label.length>12">
                    <span > {{ node.label | ellipsis(12) }} </span>
                  </el-tooltip>
                  <span v-if="node.label.length<=12">{{node.label}}</span>
         </span>
        </el-tree>
        </div>
      </el-col>
      <el-col :span="19" :xs="24">
        <div v-if="isPermit('labdata:orgnization:query')">
          <OrgCom :childOrg="parentOrg" ref="orgCom" @refreshTree="getTreeselect"></OrgCom>
        </div>
        <div v-if="isPermit('labdata:orgSecond:query')">
          <OrgSecondCom :childOrg="parentOrg" ref="secondOrg" v-if="parentOrg.orgFunctionOpt==3"></OrgSecondCom>
        </div>
        <div v-if="isPermit('labdata:orgThird:query')">
          <OrgThirdCom :childOrg="parentOrg" ref="thirdOrg" v-if="parentOrg.orgFunctionOpt==4"></OrgThirdCom>
        </div>
          <EmployeeCom :childOrg="parentOrg" ref="employee" v-if="isPermit('labdata:employee:query')"></EmployeeCom>
        <div v-if="isPermit('labdata:suborg:query')">
          <SubOrgCom :childOrg="parentOrg" ref="subOrg" v-if="parentOrg.orgFunctionOpt==2"></SubOrgCom>
          <SubThirdOrgCom :childOrg="parentOrg" ref="subThirdOrg" v-if="parentOrg.orgFunctionOpt==3"></SubThirdOrgCom>
          <RootOrgCom :childOrg="parentOrg" ref="rootOrg" v-if="parentOrg.orgFunctionOpt==1"></RootOrgCom>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { treeselect ,getOrgnization,getTreeNode} from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import OrgCom from "./org-com.vue";
  import SubOrgCom from "./sub-org-com.vue";
  import RootOrgCom from "./root-org-com.vue";
  import SubThirdOrgCom from "./sub-org-third-com.vue";
  import EmployeeCom from "../employee/employee-com.vue";
  import OrgSecondCom from "../orgSecond/org-second-com.vue";
  import OrgThirdCom from "../orgThird/org-third-com.vue";
  import platform from "@/views/labdata/platform/index.vue"
  export default {
    name: "Orgnization",
    components: { Treeselect, OrgCom, EmployeeCom,OrgSecondCom, OrgThirdCom, SubOrgCom, SubThirdOrgCom, RootOrgCom, platform},
    data() {
      return {
        activeName: 'first',
        // 部门树选项
        deptOptions: [],
        parentOrg:{"orgId":1,"orgName":"南京邮电大学","orgFunctionOpt":1, hasChildren:true},
        // 部门名称
        deptName: '',
        defaultProps: {
          children: "children",
          label: "label"
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getTreeselect();
       getOrgnization(1).then(response => {
        this.parentOrg = response.data;
        this.parentOrg.hasChildren = true;
      });
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        getOrgnization(data.id).then(response => {
          this.parentOrg = response.data;
          let treeNode = getTreeNode(this.deptOptions, data.id);
          if(treeNode && treeNode.children && treeNode.children.length>0){
            this.parentOrg.hasChildren = true;
          }
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      handleTabClick(){

      },
      isPermit(permitKey){
        if(this.$store.state.user.name=='admin'){
          return true;
        }
        let  permissions = this.$store.getters.permissions;
        return permissions.includes(permitKey);
      },

    }
  }
</script>
